<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :flex="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          height="50"
          :title="status == 1 ? `业绩明细` : `收入明细`"
          title-size="36"
          title-color="#333"
        ></u-navbar>
      </view>
      <view class="" style="padding: 20rpx">
        <view v-if="status == 1" style="background-color: #fff; border-radius: 10rpx">
          <view class="filter" @click="show = true">
            <view class="time-select">
              {{ time.year }}年{{ time.month }}月
              <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
            </view>
            <p class="total">
              当月已结算:¥{{ (total * 0.01).toFixed(2) }}，当月待结算:¥{{
                (awaitTotal * 0.01).toFixed(2)
              }}
            </p>
          </view>
          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <view class="itemHead">
              <view class="itemTitle">{{ item.description }}</view>
              <!-- <view class="itemMoney">+8.00</view> -->
            </view>
            <view class="itemTime">
              <view>{{ createTime(item.createTime) }}</view>
              <view v-if="item.status == 1" class="" style="margin: 10rpx 0 0 0; color: #67c23a">
                已结算
              </view>
              <view
                v-else-if="item.status == 2"
                class=""
                style="margin: 10rpx 0 0 0; color: #f56c6c"
              >
                已取消
              </view>
              <view v-if="item.status == 0" class="" style="margin: 10rpx 0 0 0"> 待结算 </view>
            </view>
          </view>
        </view>
        <view v-else class="">
          <view class="filter">
            <view class="filter-item">
              <view class="time-select" @click="onPicker('time')">
                {{ time.year }}年{{ time.month }}月
                <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
              </view>
              <view class="" @click="onPicker('selector')">
                全部
                <u-icon
                  style="margin-left: 10rpx"
                  name="/static/img/solid-down.png"
                  size="20"
                ></u-icon>
              </view>
            </view>
            <!-- <p class="total">累计收入:¥2560.00，待结算:¥1600.00，无效:¥800.00</p> -->
          </view>
          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <view class="itemHead">
              <view class="itemTitle">{{ item.title }}</view>
              <view class="itemMoney">
                <view>+{{ (item.totalPrice * 0.01).toFixed(2) }}</view>
                <view class=""> 状态 </view>
                <view v-if="item.status == 0" class=""> 待结算 </view>
                <view v-if="item.status == 1" class=""> 已结算 </view>
                <view v-if="item.status == 2" class=""> 已取消 </view>
              </view>
            </view>
            <view class="itemTitle">{{ item.description }}</view>
            <view class="itemTime">
              <view>{{ createTime(item.createTime) }}</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <u-picker
      :mode="mode"
      :range="rangeList"
      range-key="label"
      v-model="show"
      @confirm="confirmTime"
      :params="params"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mode: 'time',
      show2: false,
      imgStyle: {
        width: '12rem'
      },
      total: 0,
      awaitTotal: 0,
      status: 1,
      current: 0,
      scurrent: 0,
      rangeList: [
        {
          label: '注册获得佣金',
          id: 0
        },
        {
          label: '下单获得佣金 ',
          id: 1
        },
        {
          label: '提现申请',
          id: 2
        },
        {
          label: '提现申请驳回',
          id: 3
        }
      ],
      itemList: [],
      show: false,
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },
      time: {
        year: '',
        month: ''
      },
      bizType: 0,
      beginTime: '',
      endTime: ''
    }
  },
  computed: {
    createTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  onLoad(options) {
    this.status = options.status
    let now = new Date()
    this.time.year = now.getFullYear()
    this.time.month = now.getMonth() + 1
    this.beginTime = this.$utils.parseTime(
      new Date(this.time.year, this.time.month - 1, 1, 0, 0, 0)
    )
    this.endTime = this.$utils.parseTime(new Date())
    //this.queryList(1, 10, beginTime, endTime)
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      if (this.status == 1) {
        console.log(this.beginTime, this.endTime)
        this.$u
          .get('/app-api/trade/brokerage-record/my-income-list', {
            pageNo,
            pageSize,
            beginTime: this.beginTime,
            endTime: this.endTime
          })
          .then((res) => {
            this.$refs.paging.complete(res.data)
            this.total = 0
            this.awaitTotal = 0
            res.data.forEach((itm) => {
              if (itm.status == 1) {
                this.total += itm.price
              } else if (itm.status == 0) {
                this.awaitTotal += itm.price
              }
            })
          })
      } else {
        this.$u
          .get('/app-api/trade/brokerage-record/page', {
            pageNo,
            pageSize,
            bizType: this.bizType
          })
          .then((res) => {
            this.$refs.paging.complete(res.data.list)
          })
      }
    },

    onWithdrawal() {
      this.$utils.route('/other/withdrawal/withdrawal')
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    onPicker(e) {
      this.mode = e
      this.show = true
    },
    confirmTime(e) {
      this.time.year = e.year
      this.time.month = e.month
      this.beginTime = this.$utils.parseTime(
        new Date(this.time.year, this.time.month - 1, 1, 0, 0, 0)
      )
      this.endTime = this.$utils.parseTime(new Date(this.time.year, this.time.month, 1, 0, 0, 0))
      this.queryList()
      return
      if (e == 'time') {
        this.time.year = e.year
        this.time.month = e.month
        this.beginTime = this.$utils.parseTime(
          new Date(this.time.year, this.time.month, 1, 0, 0, 0)
        )
        this.endTime = this.$utils.parseTime(
          new Date(this.time.year, this.time.month + 1, 1, 0, 0, 0)
        )
        this.queryList()
      } else {
        this.bizType = this.rangeList[e].id
        this.queryList()
      }
    }
  }
}
</script>

<style>
page {
  background: #f0f1f2;
}

.moneyView {
  height: 200rpx;
  background: #fff;
  box-shadow: 0px 4rpx 10rpx 0px rgba(219, 219, 219, 0.42);
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
}

.filter-item {
  display: flex;
  align-items: center;
}
.withdrawal {
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: #fdea11;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b65a00;
  margin-left: 40rpx;
}

.tabView {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0px;
}

.itemView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
  background-color: #fff;
}

.itemView2 {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemHead {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}

.itemTitle {
  flex: 1;
}

.itemTime {
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  margin-top: 15rpx;
}
.cs {
  background-color: #fff;
  padding: 40rpx;
}
.cs-t {
  font-size: 24rpx;
}
.price {
  font-size: 48rpx;
  margin: 20rpx 0;
}
.w-btn {
  display: inline-block;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  background-color: #8cc340;
  color: #fff;
  border-radius: 45rpx;
  margin-left: 30rpx;
}

.time-select {
  flex: 1;
  padding: 10rpx 20rpx;
  font-size: 30rpx;
}
.total {
  font-size: 26rpx;
  color: #999999;
  padding: 10rpx 20rpx;
  border-bottom: 1px solid #ededed;
}
</style>
